<template>
  <el-dialog :title="modelValue.id ? '编辑模型' : '新增模型'" v-model="show" width="1024px">
    <el-form
      ref="formRef"
      :model="modelValue"
      @submit.prevent="handleSubmit"
      label-width="90px"
      label-position="left"
    >
      <jax-form-group :json="formJson" v-model="modelValue" :style="'max-width:460px'"></jax-form-group>
      <Schema v-model="modelValue.modelSchema" />
    </el-form>
    <template #footer>
      <div class="app-toolbar">
        <el-button type="default" @click="show = false">返回</el-button>
        <el-button type="primary" @click="handleSubmit()">保存</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import Schema from './schema/Schema.vue'

const emits = defineEmits(['update:modelValue', 'submit'])
const props = defineProps({
  modelValue: { type: Object, default: () => {} },
  show: { type: Boolean, default: false },
})

const formRef = ref()
const formJson = computed(() => {
  const { type } = props.modelValue
  const required = true

  return [{ name: 'modelName', label: '模型名称', required }]
})

const show = computed({
  get: () => props.show,
  set: val => emits('update:show', val),
})

const handleSubmit = () => {
  formRef.value.validate(async valid => {
    if (valid) {
      emits('submit', false)
    }
  })
}
</script>

<style lang="scss" scoped></style>
